<script setup lang="ts">
import { onBeforeMount, onBeforeUpdate, onMounted, onUpdated, ref } from 'vue';

const info = ref('123')

// dom 元素加载完毕之后执行，在这里可以发请求，获取 dom 元素，操纵 dom 元素
onMounted(() => {
    console.log('onMounted')
})

onBeforeMount(() => {
    console.log('onBeforeMount')
})

// 数据改变之前
onBeforeUpdate(() => {
    console.log('onBeforeUpdate')
})
// 数据改变完毕
onUpdated(() => {
    console.log('onUpdated')
})
</script>


<template>
<h2 @click="info+='!'">生命周期函数：{{ info }}</h2>
</template>

<style>

</style>
